<template>
  <div class="addSpace">
    <!-- 新增空间 -->
    <showBanner class="white"></showBanner>
    <div class="content">
      <el-steps :active='this.activeNum' simple style="margin-top: 20px;width:1000px;">
        <el-step title="基本信息"></el-step>
        <el-step title="图片上传"></el-step>
        <el-step title="设置价格"></el-step>
        <el-step title="配套服务"></el-step>
      </el-steps>
    </div>
    <!-- 基本信息 -->
    <div v-show="this.activeNum===1" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" label-width="300px" validate-on-rule-change>
        <el-form-item label="空间名称" prop="spaceName">
          <template>
            <el-input v-model="spaceInfoform.spaceName" style="width:460px;margin-top:-8px;" placeholder="请输入空间名称"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间logo" prop="avatar">
          <div class="uploadBox">
            <el-upload class="avatar-uploader" :action="addLogoUrl" :show-file-list="false" :http-request="uploadImg" :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="avatar-uploader" v-for="(item,index) in spaceInfoform.avatar" :key="index">
              <img class="avatar" :src="item">
              <i class="el-icon-delete" @click="deleteImg(index,item)"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="空间首页图" prop="cover">
          <div class="uploadBox">
            <el-upload class="avatar-uploader" :action="addPersonApiUrl" :show-file-list="false" :http-request="uploadImg" :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="avatar-uploader" v-for="(item,index) in spaceInfoform.cover" :key="index">
              <img class="avatar" :src="item">
              <i class="el-icon-delete" @click="deleteImg(index,item)"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="空间标题" prop="title">
          <template>
            <el-input v-model="spaceInfoform.title" style="width:460px;margin-top:-8px;" placeholder="请输入空间标题"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间类型" prop="type">
          <template>
            <el-select v-model="spaceInfoform.type" @change="Change(spaceInfoform.type)" placeholder="空间类型" style="width:460px;margin-top:-8px;">
              <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="建筑风格" prop="architecturalStyle">
          <template>
            <el-tag :key="tag" v-for="tag in architecturalStyle" closable :disable-transitions="false" @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="spaceInfoform.architecturalStyle" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
          </template>
        </el-form-item>
        <el-form-item label="空间特色" prop="feature">
          <template>
            <el-tag :key="tag" v-for="tag in architecturalStyle" closable :disable-transitions="false" @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="spaceInfoform.architecturalStyle" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
          </template>
        </el-form-item>
        <el-form-item label="空间简介" prop="description">
          <template>
            <el-input type="textarea" style="width:460px;margin-top:-8px;" v-model="spaceInfoform.description"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间地址" prop="address">
          <template>
            <el-input v-model="spaceInfoform.address" style="width:460px;margin-top:-8px;" placeholder="请输入空间标题"></el-input>
          </template>
        </el-form-item>
        <!-- <el-form-item prop="mallAddress">
        <div id="baiduMap" style="height:300px;width:380px"></div>
        </el-form-item> -->
      </el-form>
      <div style="display:flex;justify-content:center;">
        <el-button type="primary" @click="onSelectStep()">下一步</el-button>
      </div>
    </div>
    <!-- 图片上传 -->
    <div v-show="this.activeNum===2" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" label-width="300px" validate-on-rule-change>
        <el-form-item label="公共区域" prop="spaceName">
          <template>
            <el-input v-model="spaceInfoform.spaceName" style="width:460px;margin-top:-8px;" placeholder="请输入公共区域描述"></el-input>
            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </template>
        </el-form-item>
        <el-form-item label="房间" prop="avatar">
          <!-- <div class="space" v-for="(item,index) in spaceInfo" :key="index"> -->
            <template >
              <el-input v-model="spaceInfoform.spaceName"  style="width:160px;margin-top:-8px;" placeholder="请输入房间名称"></el-input>
              <el-input v-model="spaceInfoform.spaceName" style="width:360px;margin-top:-8px;" placeholder="请输入房间朝向;面积;层高"></el-input>
              <div class="uploadBox">
                <div class="avatar-uploader" v-if="spaceInfoform.spaceNam">
                  <img class="avatar" :src="spaceInfoform.spaceNam">
                </div>
                <el-upload class="avatar-uploader" :action="addPersonApiUrl" :show-file-list="false" :http-request="uploadImg">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </template>
          <!-- </div> -->
          <div class="buttonBox">
            <el-button type="primary" @click="add(item,index)">新增房间</el-button>
            <el-button type="primary" @click="del(item,index)">新增房间</el-button>
          </div>
        </el-form-item>
        <el-form-item label="样片上传" prop="cover">
            <el-input v-model="spaceInfoform.spaceName" style="width:160px;margin-top:-8px;" placeholder="请输入摄影师"></el-input>
            <el-input v-model="spaceInfoform.spaceName" style="width:160px;margin-top:-8px;" placeholder="请输入模特"></el-input>
            <el-button type="primary" @click="add">新增样片</el-button>
            <el-button type="primary" @click="del">删除样片</el-button>
            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;">
        <el-button @click="onPrevStepScd()">上一步
        </el-button>
        <el-button type="primary" @click="onNextStepScd()">下一步</el-button>
      </div>
    </div>
    <!-- 设置价格 -->
    <div v-show="this.activeNum===3" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" label-width="150px" validate-on-rule-change>
        <el-checkbox v-model="checked">设置全天拍摄时间：</el-checkbox><br>
        <el-form-item  v-if="checked" style="margin-top:-28px;margin-left:20px">
          <template>
            <el-time-picker v-model="value2" style="width:120px;margin-top:-8px;" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker><span>~</span>
            <el-time-picker arrow-control v-model="value3" style="width:120px;margin-top:-8px;" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checked" style="margin-top:-8px;margin-left:-70px"></el-form-item>
          <el-form-item label="公共区域"  v-if="checked" style="margin-top:-8px;margin-left:-50px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="房间价格" v-if="checked" style="margin-top:-62px;margin-left:200px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="人数限制" v-if="checked" style="margin-top:-62px;margin-left:450px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
          </el-form-item>
          <el-form-item label="允许进场器材" v-if="checked" style="margin-top:-8px;margin-left:-40px"></el-form-item>
          <el-form-item  v-if="checked" style="margin-top:-62px;margin-left:-40px">
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">闪光灯</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">反光板</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">柔光箱</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">柔光伞</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">视频灯</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
          </el-form-item>  
        <!-- </el-form-item> -->
        <el-checkbox v-model="checkSBT">设置上半天拍摄时间：</el-checkbox><br>
        <el-form-item  v-if="checkSBT" style="margin-top:-28px;margin-left:20px">
          <template>
            <el-time-picker v-model="value2" style="width:120px;margin-top:-8px;" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker><span>~</span>
            <el-time-picker arrow-control v-model="value3" style="width:120px;margin-top:-8px;" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checkSBT" style="margin-top:-8px;margin-left:-70px"></el-form-item>
          <el-form-item label="公共区域"  v-if="checkSBT" style="margin-top:-8px;margin-left:-50px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="房间价格" v-if="checkSBT" style="margin-top:-62px;margin-left:200px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="人数限制" v-if="checkSBT" style="margin-top:-62px;margin-left:450px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
          </el-form-item>
          <el-form-item label="允许进场器材" v-if="checkSBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
          <el-form-item  v-if="checkSBT" style="margin-top:-62px;margin-left:-40px">
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">闪光灯</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">反光板</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">柔光箱</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">柔光伞</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">视频灯</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
          </el-form-item>
        <el-checkbox v-model="checkXBT">设置下半天拍摄时间：</el-checkbox>
        <el-form-item  v-if="checkXBT" style="margin-top:-28px;margin-left:20px">
          <template>
            <el-time-picker v-model="value2" style="width:120px;margin-top:-8px;" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker><span>~</span>
            <el-time-picker arrow-control v-model="value3" style="width:120px;margin-top:-8px;" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checkXBT" style="margin-top:-8px;margin-left:-70px"></el-form-item>
          <el-form-item label="公共区域"  v-if="checkXBT" style="margin-top:-8px;margin-left:-50px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="房间价格" v-if="checkXBT" style="margin-top:-62px;margin-left:200px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="人数限制" v-if="checkXBT" style="margin-top:-62px;margin-left:450px" prop="">
            <el-input v-model="spaceInfoform.spaceName" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
          </el-form-item>
          <el-form-item label="允许进场器材" v-if="checkXBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
          <el-form-item  v-if="checkXBT" style="margin-top:-62px;margin-left:-40px">
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">闪光灯</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">反光板</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">柔光箱</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">柔光伞</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
            <template>
              <el-checkbox v-model="spaceInfoform.spaceName">视频灯</el-checkbox>
              <el-input v-model="spaceInfoform.spaceName" placeholder="最多数量" v-if="spaceInfoform.spaceName"></el-input>
            </template>
          </el-form-item>
      </el-form>
      <!-- <setPrice :spaceInfoform='spaceInfoformList' @prev-step='onPrevStepThd' @next-step='onNextStepThr'></setPrice> -->
      <div style="display:flex;justify-content:center;">
        <el-button @click="onPrevStepThd()">上一步
        </el-button>
        <el-button type="primary" @click="onNextStepThr()">下一步</el-button>
      </div>
    </div>
    <!-- 配套服务 -->
    <div v-show="this.activeNum===4" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" label-width="300px" validate-on-rule-change>
        <el-form-item label="提前入驻" prop="cover">
          <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input><span>/间</span>
          <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;margin-left:90px" placeholder="请输入门店价格"></el-input><span>/间</span>
        </el-form-item>
        <el-form-item label="工作午餐" prop="cover">
          <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input><span>/人</span>
          <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;margin-left:90px" placeholder="请输入门店价格"></el-input><span>/人</span>
        </el-form-item>
        <el-form-item label="工作晚餐" prop="cover">
          <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input><span>/人</span>
          <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;margin-left:90px" placeholder="请输入门店价格"></el-input><span>/人</span>
        </el-form-item>
        <el-form-item label="便利设施" prop="cover">
          <el-checkbox v-model="check1">衣架</el-checkbox>
          <el-checkbox v-model="check1">落地衣架</el-checkbox>
          <el-checkbox v-model="check1">挂烫机</el-checkbox>
          <el-checkbox v-model="check1">Wi-Fi</el-checkbox>
          <el-checkbox v-model="check2">免费停车</el-checkbox>
        </el-form-item>
        <el-form-item label="拍摄须知" prop="cover">
          <el-input type="textarea" style="width:470px;margin-top:-8px;" v-model="desc"></el-input>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;">
        <el-button @click=" onPrevStepFou()">上一步
        </el-button>
        <el-button type="primary" @click="addSpace()">确认添加</el-button>
      </div>
    </div>
    <!-- <div class="containor">
      <div class="padding-box">
        <el-tabs  v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="1">
            <information v-if="activeName === '1'"></information>
          </el-tab-pane>
          <el-tab-pane label="图片上传" name="2">
            <uploadImg v-if="activeName === '2'"></uploadImg>
          </el-tab-pane>
          <el-tab-pane label="设置价格" name="3">
            <setPrice v-if="activeName === '3'"></setPrice>
          </el-tab-pane>
          <el-tab-pane label="配套服务" name="4">
            <supportService v-if="activeName === '4'"></supportService>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div> -->

  </div>
</template>
<script type="text/ecmascript-6">
import showBanner from '@/components/showBanner/showBanner'
import information from './information'
import uploadImg from './uploadImg'
import setPrice from './setPrice'
import supportService from './supportService'
import { getData } from '@/assets/js/mixin'
export default {
  name: 'addSpace',
  components: {
    information,
    uploadImg,
    setPrice,
    supportService,
    showBanner
  },
  mixins: [getData],
  data() {
    return {
      activeNum: 1,
      checked: false,
      check2: false,
      check1: true,
      checkSBT: false,
      checkXBT: false,
      spaceInfoform: {
        spaceName: false
      },
      rules: {}
    }
  },
  watch: {
  },
  methods: {
    // handleClick(tab, event) {
    //   console.log(tab, event)
    // }
    // 基本信息下一步
    onSelectStep(val) {
      this.activeNum = 2
    },
    //  图片上传上一步
    onPrevStepScd() {
      this.activeNum = 1
    },
    //  图片上传下一步
    onNextStepScd() {
      this.activeNum = 3
    },
    // 设置价格上一步
    onPrevStepThd() {
      this.activeNum = 2
    },
    // 设置价格下一步
    onNextStepThr() {
      this.activeNum = 4
    },
    // 配套服务上一步
    onPrevStepFou() {
      this.activeNum = 3
    },
    // 确认添加
    addSpace() { },
    // 上传图片
    uploadImg(a, fileList) {
      var formdata = new FormData()
      formdata.append('file', a.file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post('/jt/system/uploadPhoto', formdata, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '200') {
          if (JSON.parse(res.data.data).imgUrl !== '') {
            this.spaceInfoform.spaceNam = JSON.parse(res.data.data).imgUrl
            // this.marketInfoform.imgDialogImageUrlObj.push({ id: a.file.uid, imgurl: JSON.parse(res.data.data).imgUrl })
          }
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
.addSpace
  margin 16px
  background #fff
  min-height 800px
  padding-bottom 28px
  .content
    padding 16px
    display flex
    justify-content center
.avatar-uploader
  display inline-block
  margin-right 10px
  margin-bottom 10px
  flex 0 0 60px
  height 60px
  border 1px solid #ddd
  position relative
  &:hover .el-icon-delete
    display inline-block
  .el-icon-plus, .el-icon-delete
    display inline-block
    width 60px
    height 60px
    display flex
    align-items center
    justify-content center
  .el-icon-delete
    cursor pointer
    display none
    position absolute
    text-align center
    line-height 60px
    top 0
    left 0
    background rgba(0, 0, 0, 0.5)
    color #fff
    font-size 20px
  .avatar
    width 60px
    height 60px    
</style>
